Anatomy of a Program with a Graphical UI

The Component Hierarchy

The example program (shown above) has several levels in its Component hierarchy. The parent of each level is a Container (which inherits from Component). Below is a figure of the hierarchy.

			  a Frame
			     |
			    ...
 			     |
                        a Converter
 			     |
	   ----------------------------------
           |	 	      		    |
 a ConversionPanel (metricPanel)  a ConversionPanel (usaPanel)   
           |				    |		
   -------------------		    -------------------
   |       |         | 		    |       |         |
a Label  a Panel  a Choice 	 a Label  a Panel  a Choice
	   | 				    |
     --------------		     --------------
     |		  |		     |		  |
a TextField  a Scrollbar	a TextField  a Scrollbar

Explanation

At the top of the hierarchy is the window (Frame instance) that displays the program. When the example program runs as an application, the Frame is created in the program's main() method. When the example runs as an applet, the Frame is the browser or other applet viewer window.

Under the Frame is a Converter object, which inherits from Applet and thus is a Container (specifically, a Panel). Depending on what viewer the applet is displayed in, one or more Containers might be between the Converter object and the Frame at the top of the Component hierarchy.

Directly under the Converter object are two ConversionPanels. Here is the code that puts them under the Converter:

public class Converter extends Applet {
    . . .
    public void init() {
	. . . //Create metricPanel and usaPanel,
	. . . //two ConversionPanels.
        add(metricPanel);
        add(usaPanel);
    }

Each ConversionPanel has three children: a Label, a Panel, and a Choice. Here's the code that adds the children:

class ConversionPanel extends Panel {
    . . .
    ConversionPanel(Converter myController, String myTitle, Unit myUnits[]) {
	. . . //Create leftHalf (a Panel).
	. . . //Create unitChooser (a Choice).
	add("North", new Label(title, Label.CENTER));
	add("Center", leftHalf);
	add("East", unitChooser);
    }

The "North", "Center", and "East" arguments tell the ConversionPanel's layout manager (a BorderLayout instance) where to draw the Components.

Each ConversionPanel contains a Panel named leftHalf, which in turn contains a TextField and a Scrollbar.

Summary

The example program's Component hierarchy contains eight non-Container Components -- Components that present the graphical UI of the program. These are the Labels, TextFields, Choices, and Scrollbars the program displays. There might be additional Components such as window controls under the Frame, but we don't need to know about them.

The Component hierarchy has at least six Containers -- a Frame (window), a Converter (a custom kind of Panel), two ConversionPanels (another custom Panel), and two Panel instances.

Note that if we add a new window -- a Dialog or Frame -- to the example applet, the new window will have its own Component hierarchy, unattached to the hierarchy this lesson presents.

Anatomy of a Program with a Graphical UI